<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/axios.min.js"></script>
    <script>
        function  $(id){
            return document.getElementById(id);
        }

        window.onload = function (){
            initCountry();
        }

        async function initCountry(){
            var str = "";
            let info = "";
            await axios.get("/country/findAll").then(resp =>{
               info = resp.data;
               alert(info);
               info.forEach(n =>{
                   str += `<option value="${n.id}">${n.name}</option>`;
               })
                $("countrySelect").innerHTML = str;
            });
            alert("info="+info);
            findCity();
        }

        function findCity(){
            axios.get("/city/findByCountry",{
                params:{
                    countryId:$("countrySelect").value
                }
            }).then(resp =>{
                let info = resp.data;
                var str = "";

                info.forEach(n =>{
                    str += `<option>${n.name}</option>`;
                })
                $("citySelect").innerHTML = str;
            });

        }
    </script>
</head>
<body>
    <select id="countrySelect" onchange="findCity()"></select>
    <select id="citySelect"></select>
</body>
</html>